<script setup>
import { ref } from "vue";
import { onMounted } from "@vue/runtime-core";
import Banner from "../components/Banner.vue";
import FullScreen from "../components/FullScreen.vue";
import IndexAbout from "../components/IndexAbout.vue";
import Newcenter from "../components/Newcenter.vue";
import Product from "../components/Product.vue";
import Service from "../components/Service.vue";
import Temp from "../components/Temp.vue";
import {
    getNavBanner,
    getNavArticle,
    getNavSon,
    getNavPage,
} from "../service/home";

const banner = ref([]);
const newList = ref([]);
const service = ref([]);
const about = ref({});
const productags = ref([]);
const getNavBannerList = async () => {
    banner.value = await getNavBanner({ id: 1 });
};
const getNavNewList = async () => {
    newList.value = (await getNavArticle({ id: 5, rows: 6 })).data || [];
};
const getServiceList = async () => {
    service.value = (await getNavArticle({ id: 33 })).data || [];
};
const getProductList = async () => {
    productags.value = (await getNavSon({ id: 3 })) || [];
};
const getAbout = async () => {
    about.value = (await getNavPage({ id: 34 })) || {};
};
onMounted(() => {
    getNavBannerList();
    getNavNewList();
    getServiceList();
    getProductList();
    getAbout();
});
</script>

<template>
    <Temp IsSwitchScreen="true">
        <FullScreen>
            <template v-for="item in banner" :key="item.id">
                <Banner :data="item"></Banner>
            </template>
        </FullScreen>
        <FullScreen style="background-image: url(./src/assets/barpi96_4.png)">
            <IndexAbout msg="首页关于我们" :data="about"></IndexAbout>
        </FullScreen>
        <FullScreen
            class="bg-undercolor bg-no-repeat desktop:wen-bimg-BV mobile:!bg-BV mobile:!bg-center mobile:!bg-[80%,auto]"
            style="
                background-image: url(/src/assets/Rectangle_22.png);
                background-size: 66.6% 100%;
                background-position: left;
            "
        >
            <Product
                msg="首页产品中心"
                :data="product"
                :tags="productags"
            ></Product>
        </FullScreen>
        <FullScreen class="bg-[#F2F6FA]">
            <Service msg="首页应用领域" :data="service"></Service>
        </FullScreen>
        <FullScreen
            class="bg-dominant bg-right-botton wen-news-bgi overflow-y-auto wenscroll"
        >
            <Newcenter msg="首页新闻中心" :data="newList"></Newcenter>
        </FullScreen>
    </Temp>
</template>
